<template>
	<view class="container">
		<view class="user-section">
			<image class="bg" src="../../static/temp/owenrba.jpg"></image>
			<view class="user-info-box">
				<view class="portrait-box">
					<image class="portrait" :src="user.avatar || '/static/missing-face.png'"></image>
				</view>
				<view class="info-box">
					<text class="username">{{user.nickname || '游客'}}</text>
				</view>
			</view>
			<view class="userlive">
				vip 业主   
			</view>
		</view>
		<view class="owner_box">
			<view class="owner_item" v-for="item in list"  @click="navTo(item.url)">
				<image :src="item.img" mode="" style="margin-right: 10px;"></image>
				<view class="">
					<text>{{item.name}}</text></br>
					<text style="color: #C0C4CC; ">{{item.info}}</text>
				</view>
				
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{
						name:'我的余额',
						img:'../../static/temp/owner_qiandai.png',
						info:'￥123123',
						url:'/pages/money/money'
					},
					{
						name:'返租租金',
						img:'../../static/temp/owner_zujin.png',
						info:'',
						url:'/pages/owner/tenant'
					},
					
					{
						name:'联合创始人',
						img:'../../static/temp/owner_tuandui.png',
						info:'',
						url:"/pages/owner/mytm"
					},
					{
						name:'店铺会员',
						img:'../../static/temp/owner_guquan.png',
						info:'',
						url:'/pages/owner/shopmember'
					},
					{
						name:'店铺管理',
						img:'../../static/temp/owner_dianpui.png',
						info:'',
						url:'/pages/owner/storemanagement'
					},
					{
						name:'店铺收益',
						img:'../../static/temp/owner_shouyi.png',
						info:'',
						url:'/pages/owner/shopprofit'
					},
				]
			}
		},
		methods: {
			navTo(url){
				uni.navigateTo({  
					url
				})  
			}
		}
	}
</script>

<style lang="scss">
	.user-section{
		height: 400rpx;
		padding: 100upx 30upx 0;
		position:relative;
		.bg{
			position:absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			// opacity: .7;
		}
		.userlive{
			// background-image: url("../../static/temp/owenrba.jpg");
			background-color: #F0AD4E;
			background-size: 100% 100;
			border-radius: 50rpx 0rpx 0rpx 50rpx;
			position: absolute;
			right: 0px;
			top: 30%;
			padding: 10px;
			width: 200rpx;
			color: #F8F8F8;

		}
	}
	.user-info-box{
		height: 180upx;
		display:flex;
		align-items:center;
		position:relative;
		z-index: 1;
		
		.portrait{
			width: 130upx;
			height: 130upx;
			border:5upx solid #fff;
			border-radius: 50%;
		}
		.username{
			font-size: $font-lg + 6upx;
			color: $font-color-dark;
			margin-left: 20upx;
			color: #FFFFFF;
		}
		
		
	}
	.owner{
		
		background: #fff;
		border-radius: 10px;
		margin: 13px auto 0;
		-webkit-box-shadow: 0 3px 4px #e2e2e2;
		box-shadow: 0 3px 4px #e2e2e2;
		padding: 0px 10px;
	}
	
	.owner_box {
		display: flex;
		flex-flow: row wrap;
		align-content: flex-start;
		padding: 10px;
		width: 100%;
	}
	.owner_item{
		height: 80px;
		flex:  0 0 48%;
		background: #fff;
		border-radius: 10px;
		margin: 13px auto 0;
		-webkit-box-shadow: 0 3px 4px #e2e2e2;
		box-shadow: 0 3px 4px #e2e2e2;
		border:  1px solid #e2e2e2;
		padding:  10px;
		display: flex;
		// justify-content: space-between;
		image{
			width: 100upx;
			height: 100upx;
		}
		text{
			font-size: 30upx;
		}
	}
	
</style>
